<!-- 台账管理 -->
<template>
    <div>
      <div v-show="isShowChart">
        <div id="div1">
            <span>日期: </span>
            <el-input class="biank" v-model="riqi_input" placeholder="请输入内容"></el-input>
            <span class="span">台账类别: </span>
             <el-select class="span" v-model="liebie_value" filterable placeholder="请选择">
             <el-option v-for="item in liebie_option" :key="item.value" :label="item.label" :value="item.value">
             </el-option>
             </el-select>
            <span class="span">类型: </span>
              <el-select @focus="liexing" class="span" v-model="liexin_value" clearable placeholder="请选择">
              <el-option v-for="item in liexin_option" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
              </el-select>
        </div>
        <div>
            <el-button class="anniu" type="primary" @click="inquire">查询</el-button>
            <el-button>重置</el-button>
        </div>
        <el-button class="anniu"><a href="http://47.100.30.12:8080/StandingBook/uploadExcel">EXCEL导出</a></el-button>

        <!-- 表单 -->
        <el-table :cell-style="rowStyle" :data="tableData" border style="width: 100%" >
          <el-table-column header-align="center" prop="id" label="序号" width="180">
              <template slot-scope="scope">
                  {{ scope.$index + (pager.page - 1) * pager.pagerow + 1 }}
              </template>
          </el-table-column>
          <el-table-column header-align="center" prop="makePayDate" label="日期" width="180">
          </el-table-column>
          <el-table-column header-align="center" prop="status" label="台账类别">
          </el-table-column>
          <el-table-column header-align="center" prop="type" label="类型">
          </el-table-column>
          <el-table-column header-align="center" prop="money" label="交易金额(万)">
          </el-table-column>
          <el-table-column header-align="center" label="操作">
              <template>
                <el-button class="src" type="text" size="small" @click="chaxun">查看详情</el-button>
              </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination background layout="prev, pager, next" @current-change='handelCurrentPage' :current-page='currentPage' :page-size="pageSize" :total="total">
        </el-pagination>
      </div>

        <!-- 查看详情页面 -->
        <div class="chakan" v-show="isShowTable">
            <div>
               <span style="display: inline-block;width: 7px;height: 20px;vertical-align: middle;background: #409EFF;"></span>
               <span style="margin:0 8px;font-size:15px;font-weight:bold;">申请信息</span>
                <div class="div2">
                    <ul>
                        <li><span>申请人:</span><span>{{name}}</span></li>
                        <li><span>提交时间:</span><span>{{}}</span></li>
                        <li><span>打款状态:</span><span>{{}}</span></li>
                    </ul>
                </div> 
            </div>

            <div class="div3">
               <span style="display: inline-block;width: 7px;height: 20px;vertical-align: middle;background: #409EFF;"></span>
               <span style="margin:0 8px;font-size:15px;font-weight:bold;">申请内容</span>
                <div class="div2">
                    <ul>
                        <li><span>施工班组合同: </span><span style="color:#307DFF" @click="push">劳务采购合同</span></li>
                        <li><span>关联项目:</span><span>{{}}</span></li>
                        <li><span>拟付款日期:</span><span>{{}}</span></li>
                        <li><span>付款金额:</span><span>{{}}</span></li>
                        <li>
                            <span>收款账户:</span>
                            <div class="kuang">
                                <p>户名: <span>{{name}}</span></p><p>开户行:</p><p>账户:</p>
                            </div>
                        </li>
                        <li><span>合同付款备注:</span><span>{{}}</span></li>
                        <li><span>是否紧急:</span><span>{{}}</span></li>
                        <li>
                            <span>项目审批单:</span>
                            <div class="kuang">
                            </div>
                        </li>
                        <li>
                            <span>产值确认单:</span>
                            <div class="kuang">
                            </div>
                        </li>
                        <li>
                            <span>审批人:</span>
                            <div class="toux">
                            </div>
                        </li>
                        <li>
                            <span>抄送人:</span>
                            <div class="toux">
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="div3">
                    <span style="display: inline-block;width: 7px;height: 20px;vertical-align: middle;background: #409EFF;"></span>
                    <span style="margin:0 8px;font-size:15px;font-weight:bold;">打款信息</span>    
                    <div class="div2">
                        <span style="font-family:'Helvetica',sans-serif;color:#FF3B30;">* </span>
                        <span>付款凭证: <div class="tup"></div></span>
                    </div>
                    <p class="p">付款备注:</p>
                </div> 
                <div class="div3">
                    <span style="display: inline-block;width: 7px;height: 20px;vertical-align: middle;background: #409EFF;"></span>
                    <span style="margin:0 8px;font-size:15px;font-weight:bold;">日志</span>    
                    <div class="block">
                        <el-timeline>
                          <el-timeline-item
                            v-for="(activity, index) in activities"
                            :key="index"
                            :icon="activity.icon"
                            :type="activity.type"
                            :color="activity.color"
                            :size="activity.size"
                            :timestamp="activity.timestamp">
                            {{activity.content}}
                          </el-timeline-item>
                        </el-timeline>
                    </div>
                </div> 
            </div>
            <el-button @click="fh" class="annu">返回</el-button>
        </div>

    </div>
</template>

<script>
export default { 
//import引入的组件需要注入到对象中才能使用
components: {
},
//监听属性 类似于data概念
data() {
//这里存放数据
return {
    riqi_input: '',
    name:'哈哈',
    isShowChart: true,
    isShowTable: false,
    tableData:[],
    //选择框
    liebie_option: [{
          value: '0',
          label: '进项'
        }, 
        {
          value: '1',
          label: '出项'
        }],
        liebie_value: '',
    liexin_option: [{
          value: '选项1',
          label: '请选择'
        }],
        liexin_value: '',
        //日志线轴
        activities: [{
          content: '支持使用图标',
          timestamp: '2018-04-12 20:46',
          size: 'large',
          type: 'primary',
          icon: 'el-icon-more'
        }, {
          content: '支持自定义颜色',
          timestamp: '2018-04-03 20:46',
          color: '#0bbd87'
        }, {
          content: '支持自定义尺寸',
          timestamp: '2018-04-03 20:46',
          size: 'large'
        }, {
          content: '默认样式的节点',
          timestamp: '2018-04-03 20:46'
        }],

    //表格序号自动生成
    pager: {
     page: 1, // 当前页
     pagerow: 3 // 每页展示条数
    },

    //分页
    currentPage: 1,
    pageSize: 5,
    total: 10,
};
},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    
    //获取台账数据
    getLedger(){
        this.$axios({
            url: '/StandingBook/selectForPage',
            method: 'get',
            params: {
                currentPage: this.currentPage,
                pageSize: this.pageSize
            }
        }).then(res =>{
            //console.log(res);
            if(res.data.code == 200){
                //console.log(res)
                this.tableData = res.data.data
            }
        })
    },
    handelCurrentPage(index){
        this.currentPage=index;
        this.getLedger()
    },
    //跳转页面
    push(){
        this.$router.push("/contract/stuff/stuffDetailsContract")
    },
    //表单内容居中
    rowStyle(){
        return "text-align:center"
    },
    chaxun(){
        this.isShowChart = !this.isShowChart;
        this.isShowTable = !this.isShowTable;
    },
    fh(){
        this.isShowChart = !this.isShowChart;
        this.isShowTable = !this.isShowTable;
    },

    //查询按钮
    inquire(){
        this.$axios({
            url: '/StandingBook/selectForPage',
            method: 'get',
            params: {
                currentPage: this.currentPage,
                pageSize: this.pageSize,
                makePayDate: this.riqi_input,
                status: this.liebie_value,
                type: this.liexin_value
            }
        }).then(res =>{
            console.log(res);
        })
    },
    //类型下拉框
    liexing(){
        this.$axios({
            url: '/StandingBook/selectForPage',
            method: 'get',
            params: {
            }
        }).then(res =>{
            console.log(res);
        })
    }


},
//获取后端数据
getData(){
},

//生命周期 - 创建完成（可以访问当前this实例）
created() {
    //console.log(this.tableData);
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
    this.getLedger()
},
}
</script>
<style lang='less' scoped>
#div1{
    margin-top: 75px;
}
.anniu{
    margin-top: 20px;
    margin-bottom: 20px;
    a{
        text-decoration: none;
    }
}
.src{
    font-size: 14px;
}
.biank{
    width: 250px;
    margin-left: 25px;
}
.span{
    margin-left: 30px;
}
.chakan{
    width: 80%;
    margin-top: 80px;
    margin-left: 100px;
}
.div2{
    margin-top: 20px;
    ul>li{
        padding: 10px 0;
        list-style: none;
        font-size: 14px;
    }
}
.div3{
    margin-top: 30px;
}
.p{
    margin-top: 30px;
}
.kuang{
    width: 280px;
    height: 100px;
    background-color: #F2F2F2;
    border-radius: 5px;
    margin-left: 100px;
    margin-top: -15px;
    p{
        font-size: 13px;
        padding: 7px 0px 7px 20px;
    }
}
.toux{
    width: 80px;
    height: 80px;
    background-color: #F2F2F2;
    border-radius: 5px;
    margin-left: 100px;
    margin-top: -15px;
}
.tup{
     width: 160px;
    height: 250px;
    background-color: #F2F2F2;
    border-radius: 5px;
    margin-left: 100px;
    margin-top: -20px;
}
.annu{
    margin: 30px 200px;
}
</style>